<template>
  <div>
    <el-form :inline="true">
      <el-form-item>
        <el-button type="primary" @click="openKpiDialog()">创建月份考核</el-button>
        <el-button type="primary" @click="openKpiRatio()">设置绩效系数</el-button>
      </el-form-item>
    </el-form>
    <div>
      <el-table :height="tableHeight" :data="tableData" border style="width: 100%">
        <el-table-column label="序号" type="index" width="100" align="center"></el-table-column>
        <el-table-column label="月份" prop="kpiDate" min-width="180" align="center"></el-table-column>
        <el-table-column label="状态" prop="statusDesc" min-width="180" align="center"></el-table-column>
        <el-table-column
            label="流程设置"
            align="center"
            min-width="180">
            <template slot-scope="scope">
              <el-button v-if="scope.row.status === -1" @click="changeKpiStatus(0, scope.row.kpiDate)" type="text" size="small">进入公开阶段</el-button>
              <el-button v-if="scope.row.status === 0" @click="changeKpiStatus(1, scope.row.kpiDate)" type="text" size="small">进入评分阶段</el-button>
              <el-button v-if="scope.row.status === 1" @click="changeKpiStatus(2, scope.row.kpiDate)" type="text" size="small">结束考核</el-button>
            </template>
          </el-table-column>
      </el-table>
    </div>
    <el-dialog title="创建绩效考核" :visible.sync="kpiDialog" width="600px"> 
      <el-form style="padding-right:50px;">
        <el-form-item label="考核月份：">
          <el-date-picker v-model="month" type="month" :editable="false" placeholder="选择月" value-format="yyyy-MM"></el-date-picker>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="kpiDialog = false">取 消</el-button>
        <el-button type="primary" :loading="createLoading" @click="createKpi">确 定</el-button>
      </div>
    </el-dialog>
    <el-dialog title="绩效系数设置" :visible.sync="kpiRatioDialog" width="600px"> 
      <el-form style="padding-right:50px;">
        <el-form-item v-for="item in kpiRatioArr" :key="item.id" :label="item.name + '：'" label-width="70px">
          <el-input-number v-model="item.scoresBegin" :min="0" :max="100"></el-input-number>
          至
          <el-input-number v-model="item.scoresEnd" :min="0" :max="100"></el-input-number>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="kpiRatioDialog = false">取 消</el-button>
        <el-button type="primary" @click="saveKpiRatio">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>

  export default {
    data () {
      return {
        kpiDialog: false,
        createLoading: false,
        kpiRatioDialog: false,
        show: true,
        month: '',
        tableData: [],
        kpiRatioArr: [],
        originKpiRatioArr: [],
        typeUrl:['/kpi/preparedKpi', '/kpi/assessKpi', '/kpi/closeKpi'],
        tableHeight: window.tableHeight
      }
    },
    activated() {
      this.tableHeight = document.documentElement['clientHeight'] - 250
      window.onresize = () => {
        this.tableHeight = document.documentElement['clientHeight'] - 250
      }
    },
    components:{

    },
    mounted(){
      this.searchKpiMonth();
    },
    methods: {
      openKpiDialog() {
        this.month = '';
        this.kpiDialog = true;
      },
      createKpi() {
        if(!this.month) return this.$message.error('请选择考核时间');
        this.createLoading = true;
        this.$http({
          url: this.$http.adornUrl('/kpi/beginKpi'),
          method: 'post',
          params: this.$http.adornParams({
            'kpiDate': this.month,
          })
        }).then(({data}) => {
          if (data && data.code === 0) {
            this.kpiDialog = false;
            this.$notify({
              title: '成功',
              message: '创建成功',
              type: 'success'
            });
            this.searchKpiMonth();
          }else {
            this.$message.error(data.msg)
          }
        }).finally(() => {
          this.createLoading = false;
        })
      },
      searchKpiMonth() {
        this.$http({
          url: this.$http.adornUrl('/kpi/list'),
          method: 'get'
        }).then(({data}) => {
          if (data && data.code === 0) {
            this.tableData = data.data;
          }else {
            this.$message.error(data.msg)
          }
        })
      },
      openKpiRatio() {
        this.kpiRatioDialog = true;
        this.$http({
          url: this.$http.adornUrl('/kpi/kpiconfig/list'),
          method: 'get'
        }).then(({data}) => {
          if (data && data.code === 0) {
            this.kpiRatioArr = data.data;
            this.originKpiRatioArr = [];
            this.kpiRatioArr.forEach((item) => {
              let range = [item.scoresBegin,item.scoresEnd];
              this.originKpiRatioArr.push(range);
            })
          }else {
            this.$message.error(data.msg)
          }
        })
      },
      changeKpiStatus(type, date) {
        this.$confirm('你确定要进入下一阶段吗?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning',
          center: true
        }).then(() => {
          this.$http({
            url: this.$http.adornUrl(this.typeUrl[type]),
            method: 'post',
            params: this.$http.adornParams({
              'kpiDate': date,
            })
          }).then(({data}) => {
            if (data && data.code === 0) {
              this.$notify({
                title: '成功',
                message: '修改成功',
                type: 'success'
              });
              this.searchKpiMonth();
            }else {
              this.$message.error(data.msg)
            }
          })
        })
      },
      saveKpiRatio() {
        this.kpiRatioArr.forEach((item,idx) => {
          if((item.scoresBegin !== this.originKpiRatioArr[idx][0]) || (item.scoresEnd !== this.originKpiRatioArr[idx][1])){
            this.$http({
              url: this.$http.adornUrl('/kpi/kpiconfig/update'),
              method: 'post',
              data: this.$http.adornParams(item)
            }).then(({data}) => {
              if (data && data.code === 0) {
                this.kpiRatioDialog = false;
                this.$notify({
                  title: '成功',
                  message: '保存成功',
                  type: 'success'
                });
              }else {
                this.$message.error(data.msg)
              }
            })
          }
        })
      }
    }
  }
</script>
